</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_RATING%%" --><!--DXMETADATA end --> <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end--> <div id="ProjectTitle"><!--DXMETADATA start type="ProjectTitle" -->Chart for WPF and Silverlight<!--DXMETADATA end--></div> <div id="PageTitle"><div id="PageTitleText"><!--DXMETADATA start type="ItemTitle" -->Area Charts<!--DXMETADATA end--></div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label> <label id="ExpandAllLabel" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label> </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end --> </div> <!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="BreadcrumbsContainer"><table><tr><td> <a href="Component One Chart for WPF.html">Chart for WPF and Silverlight </a> > <a href="Chart Types.html">Chart Types</a> > Area Charts</td></tr></table></div><!--DXMETADATA end --> <div id="BodyContent"> <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>An Area chart draws each series as connected points of data, filled below the points. Each series is drawn on top of the preceding series. The series can be drawn independently or stacked. In WPF, you can also create 3D Area charts. <strong>Chart for WPF and Silverlight</strong> supports the following types of Area charts:</p> <ul> <li>Area3D</li> <li>Area3Dsmoothed</li> <li>Area3Dstacked</li> <li>Area3Dstacked100pc</li> <li>AreaSmoothed</li> <li>AreaStacked</li> <li>AreaStacked100pc</li> </ul> <p>You can use the following markup to create an Area chart:</p> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1Chart ChartType=<span style="COLOR: #800000">"Area"</span> > <c1:C1Chart.Data> <c1:ChartData ItemNames=<span style="COLOR: #800000">"P1 P2 P3 P4 P5"</span>> <c1:DataSeries Label=<span style="COLOR: #800000">"Series 1"</span> Values=<span style="COLOR: #800000">"20 22 19 24 25"</span> /> <c1:DataSeries Label=<span style="COLOR: #800000">"Series 2"</span> Values=<span style="COLOR: #800000">"8 12 10 12 15"</span> /> </c1:ChartData> </c1:C1Chart.Data> <c1:C1ChartLegend DockPanel.Dock=<span style="COLOR: #800000">"Right"</span> /> </c1:C1Chart> </pre> </td> </tr> </tbody> </table> </div> <p> </p> <p><strong>3D Area Charts (WPF Only)</strong></p> <p>Use the <a href="C1.WPF.C1Chart.4~C1.WPF.C1Chart.AreaShape3D.html">AreaShape3D</a> class to access data points associated with the plot elements in the <strong>3D Area</strong> chart, get the value of the plot element when the mouse cursor is over it, get or set the size of plot elements in pixels, specify whether points are connected with smoothed lines. The following types of 3D Area charts are available in WPF:</p> <table class="InvisibleTable" style="HEIGHT: 532px; WIDTH: 63.44%"> <tbody> <tr> <td width="300">Area3D</td> <td>Area3Dstacked</td> </tr> <tr> <td style="TABLE-LAYOUT: auto" width="300"><img border="0" alt="" src="images/Graphics/ChartType_Area3D.png"></td> <td style="TABLE-LAYOUT: auto"><img border="0" alt="" src="images/Graphics/ChartType_Area3DStacked.png"></td> </tr> <tr> <td width="300">Area3Dsmoothed</td> <td>Area3Dstacked100pc</td> </tr> <tr> <td width="300"><img border="0" alt="" src="images/Graphics/ChartType_Area3DSmoothed.png"></td> <td><img border="0" alt="" src="images/Graphics/ChartType_Area3DStacked100.png"></td> </tr> </tbody> </table> <p> </p> <p><strong>Standard Area Charts (WPF and Silverlight)</strong></p> <table class="InvisibleTable" style="HEIGHT: 554px; WIDTH: 63.51%"> <tbody> <tr> <td>Area</td> <td>AreaStacked</td> </tr> <tr> <td><img border="0" alt="" src="images/Graphics/ChartType_Area.png"></td> <td><img border="0" alt="" src="images/Graphics/ChartType_AreaStacked.png"></td> </tr> <tr> <td>AreaSmoothed</td> <td>AreaStacked100pc</td> </tr> <tr> <td><img border="0" alt="" src="images/Graphics/ChartType_AreaSmoothed.png"></td> <td><img border="0" alt="" src="images/Graphics/ChartType_AreaStacked100.png"></td> </tr> </tbody> </table> <p> </p><!--DXMETADATA end--> <a name="seealsobookmark"></a> <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><div class="SectionHeading" id="seealsoSectionHeading"><span class="SectionHeadingIcon"><!-- --></span><span class="SectionHeadingText">See Also</span></div><div id="seealsoSectionContent" class="SectionContent"><div class="SeeAlsoLink"> <a href="Bar and Column Charts.html">Bar and Column Charts</a></div> </div><!--DXMETADATA end--> </div> <div id="FooterContent"> <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p> </p><p> </p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p> </p><p> </p><hr style="height: 1px"><p>Copyright © <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script>$(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } });</script></p><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><a target="_blank" href="http://our.componentone.com/groups/">Product Support Forum</a> | <a target="_blank" href="http://feedback.componentone.com/forums/272000-wpf-and-silverlight-documentation">Documentation Feedback</a><!--DXMETADATA end--> </div> </body> </html>